<template>
  <div class="compilers">
    <WmcCard title="编译器定义">
      <el-transfer
        v-model="formData"
        :titles="['全部编译器定义', '本工程已选编译器定义']"
        :data="allCompilers"
        @change="handleChange"
        :props="{
          key: 'name',
          label: 'name',
          disabled: ''
        }"
      >
        <template #left-footer>
          <el-button
            class="transfer-footer"
            size="small"
            @click="openDialogTable"
          >
            管理
          </el-button>
        </template>
      </el-transfer>
    </WmcCard>

    <PageDialogTable
      title="全局编译器定义管理"
      width="780px"
      :dialogVisible="dialogVisible"
      v-if="dialogVisible"
      :dataList="allCompilers_"
      :pageDialogTableConfig="allCompilersTableConfig"
      @add="openAddDialog"
      @edit="openAddDialog"
      @delete="removeRow"
      @close="closeDialog"
      @handleConfirm="handleConfirm"
    ></PageDialogTable>

    <page-dialog-form
      title="添加/修改全局编译器"
      width="420px"
      :dialogVisible="dialogVisible_add"
      :modelConfig="addCompilerConfig"
      v-model="newFormItem"
      v-if="dialogVisible_add"
      @close="closeAddDialog"
      @handleConfirm="handleAddConfirm"
    ></page-dialog-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import WmcCard from '@/render/base-ui/card/index'
import PageDialogTable from '@/render/components/page-dialog-table'
import PageDialogForm from '@/render/components/page-dialog-form'
import { allCompilersTableConfig } from '../config/allcompilers-table.config'
import { addCompilerConfig } from '@/render/views/project/baseconfig/config/add-compiler.config'
import { ICompiler } from '@/render/store/baseconfig/types'
import { usePageDialogForm } from '@/render/hooks/use-page-dialog-form'
import emitter from '@/render/utils/mitt'

export default defineComponent({
  components: { WmcCard, PageDialogTable, PageDialogForm },
  props: {
    modelValue: {
      type: Array as PropType<ICompiler[]>,
      default: () => []
    },
    allCompilers: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const formData = ref(props.modelValue)
    const allCompilers_ = ref(props.allCompilers)

    const handleChange = (value: string, direction: any, movedKeys: any) => {
      console.log(value, direction, movedKeys)
    }

    // 调用hook获取dialog-form公共变量和函数
    const {
      dialogVisible: dialogVisible_add,
      newFormItem: newFormItem,
      openDialog: openAddDialog,
      closeDialog: closeAddDialog,
      handleConfirm: handleAddConfirm
    } = usePageDialogForm(allCompilers_.value)

    // 调用hook获取dialog-table公共变量和函数
    const dialogVisible = ref(false)
    const openDialogTable = () => {
      dialogVisible.value = true
    }
    const closeDialog = () => {
      dialogVisible.value = false
    }
    const handleConfirm = () => {
      dialogVisible.value = false
    }
    const removeRow = (item_name: any) => {
      const index = allCompilers_.value.findIndex(
        (item: any) => item.name === item_name
      )
      if (index !== -1) {
        allCompilers_.value.splice(index, 1)
      }
    }

    watch(
      formData,
      (newValue, o) => {
        emit('update:modelValue', newValue)
        emitter.emit('update-tab', 'emitter')
      },
      {
        deep: true
      }
    )

    return {
      formData,
      allCompilers_,
      dialogVisible,
      dialogVisible_add,
      newFormItem,
      allCompilersTableConfig,
      addCompilerConfig,
      openAddDialog,
      closeAddDialog,
      handleAddConfirm,
      removeRow,
      handleChange,
      closeDialog,
      handleConfirm,
      openDialogTable
    }
  }
})
</script>

<style scoped lang="less">
.compilers {
  ::v-deep .el-transfer {
    display: flex;
  }
  ::v-deep .el-transfer-panel {
    width: 45%;
  }
  ::v-deep .el-transfer__buttons {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .el-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 40px;
    }
    .el-button + .el-button {
      margin-left: 0;
      margin-top: 10px;
    }
  }
  .transfer-footer {
    margin-left: 10px;
  }
}
</style>
